<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员后台</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .el-header {
            background-image:url("/ssm/img/11.png");
            float: right;
            color: #FFF;
            line-height: 60px;
        }

        .el-aside {
            background-color: #324158;
            color: #333333;
            text-align: center;
            line-height: 200px;
            height: 800px;
        }

        .el-main {
            padding: 0;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>

<div id="app">

    <el-container>
        <el-header>
            姓名:{{adminInfo.name}}
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        class="el-menu-vertical-demo"
                        background-color="#324158"
                        text-color="white"
                        active-text-color="yellow">
                    <el-submenu v-for="(m,i) in adminMenu" v-bind:index="m.id">
                        <template slot="title">
                            <i :class="m.icon"></i>
                            <span>{{m.name}}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(s,si) in m.subMenu"  v-bind:index="s.id" @click="addTab(s)">
                                <i :class="s.icon"></i>
                                {{s.name}}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-tabs  v-model="editableTabsValue" type="card" closable  @tab-remove="removeTab" >
                    <el-tab-pane
                            key="0"
                            label="欢迎页"
                            name="0">
                            欢迎来到好医生管理系统
                    </el-tab-pane>
                    <el-tab-pane
                            v-for="(item, index) in editableTabs"
                            :key="item.id"
                            :label="item.name"
                            :name="item.id">
                        <iframe style="width: 100%;height: 750px;border: 0;" :src="item.url"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>

    $.get("/ssm/admin/getInfo",function (backData) {
        haha.adminMenu=backData.data.currentPermission;
        haha.adminInfo=backData.data.currentAdmin;
    });


    var haha = new Vue({
        el:"#app",
        data:{
            editableTabsValue:"0",
            editableTabs:[],
            adminMenu:[],
            adminInfo:{}
        },
        methods:{
            addTab(s){
                if(  haha.editableTabs.indexOf(s)<0){
                    haha.editableTabs.push(s);
                }
                haha.editableTabsValue = s.id;

            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.id;
                        }
                    }
                });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.id !== targetName);
            }
        }
    });


</script>

</body>
</html>